<template>
  <view class="my">
    <image src="../../static/image/setup.png" mode="" class="set"></image>
    <view class="my-info">
      <view class="my-info-name">陈先生,你好！</view>
      <view class="my-info-number">
        <view class="number-item">
          <view class="number-item-title">上报火情数</view>
          <view class="number-item-value">10</view>
        </view>
        <view class="number-item">
          <view class="number-item-title">协助火情处理数</view>
          <view class="number-item-value">10</view>
        </view>
      </view>  
      <view class="info">
        <view class="info-item">
          <image src="../../static/image/area.png" mode=""></image>
          <view class="info-item-title">负责区域:</view>
          <view class="info-item-value">一区</view> 
        </view>
        <view class="info-item">
          <image src="../../static/image/people.png" mode=""></image>
          <view class="info-item-title">身份:</view>
          <view class="info-item-value">巡护人员</view> 
        </view>
        <view class="info-item">
          <image src="../../static/image/time.png" mode=""></image>
          <view class="info-item-title">注册时间:</view>
          <view class="info-item-value">2023年10月11日</view> 
        </view>
        <view class="info-item">
          <image src="../../static/image/mobile-phone.png" mode=""></image>
          <view class="info-item-title">联系方式:</view>
          <view class="info-item-value">1234567899</view> 
        </view>
      </view>
    </view>
    <!-- 历史上报 -->
    <view class="history">
      <view class="history-title">
        <image src="../../static/image/list.png" mode=""></image>
        <view class="">历史上报</view>
      </view>
      <view class="data-list">
        <view class="data-item" v-for="(item,index) in firelist" :key="item.id">
          <view class="data-item-head">
            <view class="data-item-time">2023年11月11日 12:12:12</view>
          </view>
          <view class="data-item-main">
            <view class="data-item-address">一区</view>
            <view class="data-item-level">
              <image :src="level(item.level)" mode=""></image>
            </view>
          </view>
          <view class="data-item-details">
            林火情“空天地体化监测子系统用于接入卫星遥感监测、航空监测和地面监测等监测数据和热点信息的推送、跟踪和管理。
          </view>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        firelist:[
          {
            id:1,
            level:3
          },{
            id:2,
            level:2
          },{
            id:3,
            level:1
          }
        ],
      }
    },
    methods: {
      level(level) {
        if(level == 1) {
          return '../../static/image/fire3.png'
        } else if(level == 2) {
          return '../../static/image/fire2.png'
        } else {
          return '../../static/image/fire1.png'
        }
      },
    }
  }
</script>

<style scoped>
.my {
  padding: 20rpx;
}
.set {
  width: 55rpx;
  height: 55rpx;
  float: right;
}
.my-info {
  margin-top: 40rpx;
}
.my-info-name {
  font-size: 34rpx;
  font-weight: 600;
  color: #00aaff;
}
.my-info-number {
  padding: 20rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.number-item {
  width: 300rpx;
  height: 130rpx;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  border-radius: 20rpx;
  flex-direction: column;
  justify-content: space-around;
}

.number-item-value{
  color: #00aaff;
  font-size: 34rpx;
  font-weight: 600;
}
.info {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 5rpx #00aaff;
}
.info-item {
  padding: 20rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx dashed #ccc;
}
.info-item image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}
.info-item:last-child {
  border-bottom: none;
}
.info-item-title {
  width: 150rpx;
  margin-right: 20rpx;
}
.info-item-value  {
  color: #00aaff;
  font-size: 32rpx;
  font-weight: 600;
}
.history {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 5rpx #00aaff;
}
.history-title {
  display: flex;
  align-items: center;
  color: #00aaff;
  font-size: 30rpx;
  font-weight: 600;
  padding-bottom: 8rpx;
}
.history-title image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}
.data-list {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #fff;
  }
  .data-item {
    background-color: #fff;
    box-shadow: 0 0 5rpx #999;
    color: #00aaff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
  }
  .data-item-address {
    font-size: 30rpx;
    font-weight: 600;
  }
  .data-item-time {
    font-size: 26rpx;
  }
  .data-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .data-item-level image {
    width: 60rpx;
    height: 60rpx;
  }
  .data-item-details {
    font-size: 25rpx;
    color: #999;
  }
</style>
